import React, { Component } from 'react';
import './index.css';

export default class List extends Component {
  state = {
    mouseIn: false,
  };
  render() {
    const { mouseIn } = this.state;
    return (
      <div className='listItem' onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
        <input type='checkbox' checked={this.props.done} onChange={this.onChange(this.props.id)} />
        <span>{this.props.taskName}</span>
        <span className='delBtn' onClick={this.delItem} style={{ display: mouseIn ? 'block' : 'none' }}>
          删除
        </span>
      </div>
    );
  }
  mouseEnter = () => {
    this.setState({ mouseIn: true });
  };
  mouseLeave = () => {
    this.setState({ mouseIn: false });
  };
  onChange = id => {
    return e => {
      this.props.changeSelect(id, e.target.checked);
    };
  };
  delItem = () => {
    console.log(this.props)
    const { id, done } = this.props;
    this.props.delItem(id, done);
  };
}
